<template></template>
<script lang="ts">
import * as THREE from 'three';

// 场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

// 渲染器
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画混合器
const mixer = new THREE.AnimationMixer(cube);

// 关键帧轨迹：绕Y轴旋转
const times = [0, 2, 4];               // 时间点（秒）
const values = [0, 0, 0, Math.PI, 0, 0, Math.PI*2, 0, 0];  // 旋转欧拉角（x,y,z）
// 注意：旋转轨迹用 QuaternionTrack 或 EulerTrack（需要转换为 Quaternion）

// 这里用 QuaternionKeyframeTrack，更准确
const quaternionKF = new THREE.QuaternionKeyframeTrack(
  '.quaternion', 
  times,
  [
    0, 0, 0, 1,                                       // 初始四元数
    0, Math.sin(Math.PI/4), 0, Math.cos(Math.PI/4),  // 旋转90度（π/2）一半对应四元数
    0, 0, 0, 1                                        // 旋转360度回归初始
  ]
);

const clip = new THREE.AnimationClip('rotateY', -1, [quaternionKF]);
const action = mixer.clipAction(clip);
action.play();

// 时钟
const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const delta = clock.getDelta();
  mixer.update(delta);

  renderer.render(scene, camera);
}

animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});


</script>